import Taro, { Component } from '@tarojs/taro'
import { View, Image, Text, ScrollView } from '@tarojs/components'
import { observer, inject } from '@tarojs/mobx'
import {formatNumber, getUserInfo, navigateTo, pageSize} from "../../utils/common";
import { MyRecordOutput } from '../../api/api'
import FooterMenu from '../../components/FooterMenu'

import './fish.scss'
import nav_01 from "../../assets/img/banner_01.jpg";

import {IStoreProps} from '../../store/Stores'

interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Sign extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    orderState: [
      { id: 0, title: '全部' },
      { id: 1, title: '收益中' },
      { id: 2, title: '已到期' },
    ],
    currentState: 0,
    pageIndex: 1,
    pageSize: pageSize,
    items: [] as MyRecordOutput[],
    totalCount: 0,
  }

  componentWillMount () {
    let userInfo = getUserInfo() || {}
    let pagesArr = Taro.getApp().state.pagesArr || []
    let hashUrl = window.location.hash

    pagesArr.map(item => {
      if('#/'  + item.path === hashUrl ) {
        if(item.isLogin && Object.keys(userInfo).length <= 0) {
          Taro.navigateTo({ url: '/pages/index/index' });
        } else if (item.isLogin && !userInfo.userPhone) {
          Taro.navigateTo({ url: '/pages/login/login' });
        }
      }
    })
    this.getItems()
  }

  getItems = () => {
    let { currentState, pageIndex, pageSize } = this.state
    let { fishStore } = this.props.stores
    fishStore.myRecordPage({
      type: currentState,
      pageIndex,
      pageSize,
      callback: res => {
        if (this.state.pageIndex === 1) {
          this.setState({totalCount: res.totalCount, items: res.items})
        }else {
          const { items } = this.state;
          items.push(...res.items || []);
          this.setState({totalCount: res.totalCount, items})
        }
      }
    })
  }

  onReachBottom(): void {
    let {totalCount, pageSize, pageIndex} = this.state
    const {loading} = this.props.stores.homeStore;
    if (totalCount > pageIndex * pageSize && !loading) {
      this.setState({
        pageIndex: pageIndex + 1
      }, () => {
        this.getItems()
      })
    }
  }

  setS(id: number) {
    this.setState({ currentState: id, items: [], pageIndex: 1 }, () => { this.getItems() })
  }

  link = (url: string) => {
    navigateTo(url)
  }

  render () {
    let { orderState, currentState, items } = this.state
    return (
      <View className='page-bg'>
        <ScrollView className='scroll-view-nav' scrollX>
        {
          orderState.map(item => {
            return(
              <View className={currentState===item.id?'scroll-item scroll-item-on':'scroll-item'} key={item.id}
                    onClick={this.setS.bind(this,item.id)}
              >{item.title}<Text className='line' /></View>
            )
          })
        }
      </ScrollView>
        <View className='interval' />
        {
          items.length>0&&
            <View className='list03'>
              {
                items.map(item => {
                  return(
                    <View className='list01__item' onClick={this.link.bind(this,'/pages/mine/fishDetail?id='+item.id)} key={item.id}>
                      <Image className='list01__img'  src={item.comImg} />
                      <View className='list01__info'>
                        <View className='list01__line'>
                          <View className='list01__date'>第{formatNumber(item.periodsNum)}期</View>
                          <View className='list01__title'>{item.comName}</View>
                          <View className='list01__status list01__status-ss icon-link-theme'>{item.status}</View>
                        </View>
                        <View className='list01__line list01__line-i'>
                         {/*  <View className='list01__i'>
                            收益({(item.proportion || 0)*100}%)
                          </View>
                          <View className='list01__i'>
                            期限({item.cultureDays}天)
                          </View> */}
                        </View>
                        <View className='list01__line list01__line-sk'>
                          <View className='list01__line-price yuan'>{item.unitPrice}<Text className='small'>/条</Text> </View>
                          <View className='list01__line-num'><Text className='small'>x</Text>{item.productQuantity}</View>
                        </View>
                      </View>
                    </View>
                  )
                })
              }
            </View>
        }
        {
          items.length<=0&&
          <View className='none'>
             <Image className='none__icon' src={require('../../assets/img/common/none.png')} />
             <View className='none__desc desc'>暂时还没有任何联养记录！</View>
          </View>
        }

        <View className='footer-block' />
        <FooterMenu menu='order' />
      </View>
    )
  }
}

export default Sign
